<template>
  <div style="width:100%;height:100%;min-width: 350px;" :id="visite_id"></div>
</template>

<script>
  import echarts from 'echarts';
  export default {
    name: 'echartsLine',
    props: ['xDataArr', 'yDataArr', 'visite_volume_id', 'xDataTitle'],
    data () {
      return {
        xDataList: [],
        yDataList: [],
        visite_id: '',
        title: '',
      };
    },
    created: function () {
      var _this = this;
      _this.xDataList = _this.xDataArr;
      _this.yDataList = _this.yDataArr;
      _this.visite_id = 'id_' + _this.visite_volume_id;
      _this.title = _this.xDataTitle;
    },
    mounted () {
      var _this = this;
      this.$nextTick(() => {
        var visite_id = _this.visite_id;
        let visiteVolume = echarts.init(document.getElementById(visite_id));

        const option = {
          title: {
            text: _this.title,
            x: 'center',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '40px',
            left: '10px',
            right: '10px',
            bottom: '30px',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          xAxis: {
            type: 'category',
            data: _this.xDataList,//['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
            nameTextStyle: {
              color: '#c3c3c3'
            },
            axisLabel: {
              interval: 0,
              //rotate:45,
              margin: 2,
            },
            axisPointer: {
              type: 'shadow'
            }
          },
          series: [
            {
              name: '数量',
              type: 'line',
              data: _this.yDataList,//[2, 3, 4, 5, 6, 7, 3]
              itemStyle: {
                normal: {
                  //以下为是否显示，显示位置和显示格式的设置了
                  label: {
                    show: true,//显示数字
                    position: 'top',
                    formatter: '{c}'
                  }
                }
              }
            }
          ]
        };

        visiteVolume.setOption(option);

        window.addEventListener('resize', function () {
          visiteVolume.resize();
        });
      });
    }
  };
</script>
